<template>
	<div>
	    <div class="floor2">
            <div class='left' :style="{backgroundImage: 'url(' + goodsInfo.goodsImage+ ')'}">

            </div>
            <div class='middle'>
            	<div class="title">{{goodsInfo.comName}}</div>
            	<div style="color: #999999;margin-bottom: 4px;" v-if="goodsInfo.goodsCount>0">剩余数量:{{formatCount(goodsInfo.goodsCount)}}</div>            	
            	<div style="color: #999999;margin-bottom: 4px;" v-if="goodsInfo.limitCount>0">每人限购:{{formatLimit(goodsInfo.limitCount)}}</div>
            	<div class="price">¥ {{formatPrice(goodsInfo.comPrice)}}</div>
            </div>
            <div class="activeright">
            	<van-stepper v-model="value" integer input-width="30px" button-size="20px" @change="change"   disable-input
            		min="1" :max="max"/>
            </div>
	    </div> 	
	</div>	
</template>

<script>
import  "@/assets/reset/reset.css"	
export default {	
	data() {
       return {
           value:1
       }
	},
	props:['goodsInfo'],
	computed: {
	    // 计算还需支付
	    max:function(){
	       if(this.goodsInfo.limitCount==-1&&this.goodsInfo.goodsCount>0){
	       	 return this.goodsInfo.goodsCount
	       }
	       if(this.goodsInfo.limitCount>0&&this.goodsInfo.goodsCount==-1){
	       	 return this.goodsInfo.limitCount
	       }
	       if(this.goodsInfo.limitCount>0&&this.goodsInfo.goodsCount>0){
	       	 return this.goodsInfo.goodsCount>=this.goodsInfo.limitCount?this.goodsInfo.limitCount:this.goodsInfo.goodsCount
	       }	       
	    }	    
	},    	
	methods: {	
	  formatLimit(str){
		if(str==-1){
			return '不限购'
		}else{
			return str
		}	  	
	  },
	  formatCount(str){
		if(str==-1){
			return '不限量'
		}else{
			return str
		}	  	
	  },
      formatPrice(num){
      	if(num){
      		return num.toFixed(2)
      	}else{
      		return '0.00'
      	}
      },
      change(res){
      	this.$emit('changeBuyNumber',res)
      }
	},
	mounted() {
		
	}
}	
</script>

<style scoped="" lang="scss">
.floor2{padding: 20px;background: #fff;display: flex;}
.left{width: 100px;height: 100px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}


.middle{flex: 1;padding: 0 10px 0 15px;justify-content: space-between;display: flex;flex-direction: column;
   .title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 1.6;font-size: 14px}
   .price{font-weight: bold;color: #F22613;font-size: 13px;}
}
.activeright{
	display: flex;justify-content: center;align-items: center;
}
</style>